<template>
  <div class="min-h-screen bg-gray-50">
    <NavBar />
    
    <div v-if="loading" class="max-w-7xl mx-auto px-4 py-8">
      <div class="text-center py-12">
        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500"></div>
        <p class="mt-4 text-gray-600">加载中...</p>
      </div>
    </div>
    
    <div v-else-if="novel" class="max-w-7xl mx-auto px-4 py-8">
      <!-- 小说基本信息 -->
      <div class="bg-white rounded-lg shadow-md p-8 mb-6">
        <div class="flex gap-6 flex-col md:flex-row">
          <!-- 封面 -->
          <div class="flex-shrink-0">
            <div class="w-48 h-64 bg-gradient-to-br from-orange-100 to-red-100 rounded-lg flex items-center justify-center shadow-lg">
              <div v-if="novel.cover_url">
                <img :src="novel.cover_url" :alt="novel.title" class="w-full h-full object-cover rounded-lg" />
              </div>
              <div v-else class="text-7xl">📖</div>
            </div>
          </div>
          
          <!-- 信息 -->
          <div class="flex-1">
            <h1 class="text-3xl font-bold text-gray-800 mb-4">{{ novel.title }}</h1>
            
            <div class="space-y-3 mb-6">
              <div class="flex items-center gap-2 text-gray-600">
                <span class="font-semibold">作者:</span>
                <span>{{ novel.author }}</span>
              </div>
              
              <div class="flex items-center gap-4 text-gray-600">
                <span><strong>分类:</strong> {{ novel.category_name }}</span>
                <span><strong>状态:</strong> {{ novel.status }}</span>
              </div>
              
              <div class="flex items-center gap-4 text-gray-600">
                <span><strong>字数:</strong> {{ formatWordCount(novel.word_count) }}</span>
                <span><strong>章节数:</strong> {{ novel.chapter_count }}</span>
                <span><strong>评分:</strong> ⭐ {{ novel.rating }}</span>
              </div>
              
              <div class="flex items-center gap-4 text-gray-600">
                <span><strong>人气:</strong> 👁️ {{ formatNumber(novel.view_count) }}</span>
                <span><strong>收藏:</strong> ❤️ {{ formatNumber(novel.collect_count) }}</span>
              </div>
            </div>
            
            <!-- 标签 -->
            <div v-if="novel.tags && novel.tags.length" class="flex flex-wrap gap-2 mb-4">
              <span
                v-for="tag in novel.tags"
                :key="tag"
                class="px-3 py-1 bg-orange-100 text-orange-600 rounded-full text-sm"
              >
                {{ tag }}
              </span>
            </div>
            
            <!-- 简介 -->
            <div class="bg-gray-50 rounded-lg p-4">
              <h3 class="font-semibold text-gray-800 mb-2">简介</h3>
              <p class="text-gray-600 leading-relaxed">{{ novel.description || '暂无简介' }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 章节列表 -->
      <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">章节目录</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          <div
            v-for="chapter in chapters"
            :key="chapter.id"
            @click="goToChapter(chapter.id)"
            class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:border-orange-500 hover:bg-orange-50 cursor-pointer transition-colors group"
          >
            <div class="flex items-center gap-2">
              <span class="text-sm text-gray-500">第{{ chapter.chapter_number }}章</span>
              <span class="font-medium text-gray-800 group-hover:text-orange-500">{{ chapter.title }}</span>
              <span v-if="chapter.is_vip" class="text-xs bg-yellow-100 text-yellow-600 px-2 py-0.5 rounded">VIP</span>
            </div>
            <span class="text-xs text-gray-400">{{ formatWordCount(chapter.word_count) }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <div v-else class="max-w-7xl mx-auto px-4 py-8">
      <div class="text-center py-12">
        <p class="text-gray-600">小说不存在</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { novelAPI } from '@/utils/api'
import NavBar from '@/components/layout/NavBar.vue'

const route = useRoute()
const router = useRouter()

const novel = ref(null)
const chapters = ref([])
const loading = ref(false)

// 格式化字数
const formatWordCount = (count) => {
  if (count < 1000) return `${count}字`
  if (count < 10000) return `${(count / 1000).toFixed(1)}k`
  return `${(count / 10000).toFixed(1)}w`
}

// 格式化数字
const formatNumber = (num) => {
  if (num < 1000) return num
  if (num < 10000) return `${(num / 1000).toFixed(1)}k`
  return `${(num / 10000).toFixed(1)}w`
}

// 跳转到章节
const goToChapter = (chapterId) => {
  router.push(`/novel/${route.params.id}/chapter/${chapterId}`)
}

// 获取小说详情
onMounted(async () => {
  loading.value = true
  try {
    const res = await novelAPI.getNovelDetail(route.params.id)
    novel.value = res.data
    chapters.value = res.data.chapters || []
  } catch (error) {
    console.error('获取小说详情失败:', error)
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
/* 自定义样式 */
</style>

